<template>
  <el-menu
    active-text-color="#E0F3EE"
    background-color="#1E293B"
    class="el-menu-vertical-demo"
    text-color="#F472B6"
    router
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu
      v-for="(s, index) in sysfuns.filter((s) => s.parentid === 1)"
      :key="'el-sub-menu' + index"
      :index="index"
    >
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{ s.title }}</span>
      </template>
      <el-menu-item
        :index="item.url"
        v-for="(item, i) in sysfuns.filter((si) => si.parentid === s.sid)"
        :key="s.title + i"
      >
        <el-icon><icon-menu /></el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { useSysfunStore } from '@/stores/sysfun'
import { Menu as IconMenu, Operation, Setting, Location } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'

const sysfunStore = useSysfunStore()
const { sysfuns } = storeToRefs(sysfunStore)

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
sysfunStore.findFunByRoleid()
</script>
